.article-card .article-content-box {
  top: 0;
}

.article-content-box {
  position: relative;
  overflow-y: scroll;
  // top: 60px;
  left: 0;
  width: 100%;
  min-height: 100vh;
  // min-height: calc(100vh - 60px);
  height: 100vh;
  // height: calc(100vh - 60px);
  padding-top: 60px;
  color: var(--c-text-primary);

  .article-items {
    opacity: .8;
    padding-bottom: 20px;
    margin: 20px auto;
    text-align: center;
    font-size: .9em;
    border-bottom: 1px dashed var(--c-border-primary);

    span {
      margin: 0 10px;
    }
  }

  .article-desc {
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 5px;
    background-color: var(--c-border-secondary);

    span {
      word-break: break-word;
    }
  }

  .article-layout {
    padding-top: 10px;
  }

  &.toggle-transition {

    /deep/ .article-skeleton {
      opacity: 0;
      transition: 1s;
      visibility: hidden;
    }

    .article-layout {
      opacity: 1;
      transition: .5s;
    }
  }

  .row-box {
    border-radius: 5px;
  }

  /deep/ .article-layout {
    opacity: 0;
    margin: 0 auto;

    .title {
      text-indent: 5px;
      text-align: center;
      font-weight: 500;
      // font-size: 1.5rem;
      color: var(--c-text-primary);
    }
  }

  /deep/ .article-page__container {
 
    .article-content__container {
      // min-height: calc(100vh - 130px);
      padding: 40px;
    }

    .article-content__info {
      display: flex;
      margin: 20px 0;
      padding: 10px 20px;
      font-size: 1rem;
      border-radius: 10px;
      justify-content: space-between;
      flex-wrap: wrap;

      .slm {
        margin-left: 20px;
        font-size: inherit;
      }

      .tag-list {
        width: 100%;
        margin-bottom: 0;

        .tag-item {
          display: inline-block;
          margin-top: 10px;
          margin-right: 10px;
          padding: 0 10px;
          border-radius: 5px;
          cursor: pointer;
        }
      }
    }
  }
    
  .article-content__body {
    word-break: break-word;

    /deep/ img {
      max-width: 100%;
      border-radius: 5px;
    }

    /deep/ iframe {
      width: 100%;
      min-height: 250px;
      height: 25vw;
      border-radius: 5px;
    }

    /deep/ ul,
    /deep/ li {
      list-style: inherit;
      margin: initial;
      padding: initial;
    }

    /deep/ ul {
      padding-left: 40px;
    }

    /deep/ tbody {
      border: 1px solid var(--c-markdown-table-border);
      border-radius: 2px;
    }

    /deep/ th,
    /deep/ td {
      padding: 10px;
      border-bottom: 1px solid var(--c-markdown-table-tr-border);
      border-right: 1px solid var(--c-markdown-table-tr-border);

      &:last-child {
        border-right: 0;
      }
    }
    
    /deep/ th {
      background-color: var(--c-markdown-table-border);
    }
  }

  /deep/ .article-page__sideber {
    padding-left: 15px;
  }

  /deep/ .-horizontal {
    display: none;
  }
}

.layout-default-mobile {
  .article-page__container,
  .article-page__sideber {
    padding: 0;
  }
  
  /deep/ .layout-page {
    padding-top: 20px;
  }

  .row-box {
    border-radius: 0;
    border-right: 0;
    border-left: 0;
  }

  .article-content-box .article-content__container {
    padding: 20px;
  }
}